<template>
    <div class="service-detail-container">
        <!-- 页面头部 -->
        <div class="page-header">
            <div class="header-content">
                <div class="header-left">
                    <h2>{{ pageTitle }}</h2>
                </div>
                <div class="header-right">
                    <el-button @click="goBack">
                        <el-icon><ArrowLeft /></el-icon>
                        返回
                    </el-button>
                </div>
            </div>
        </div>

        <!-- 服务详情内容 -->
        <div class="detail-content">
            <el-card shadow="never" class="detail-card">
                <div class="service-info">
                    <!-- 左侧信息 -->
                    <div class="info-left">
                        <div class="info-item">
                            <span class="label">账号:</span>
                            <span class="value">{{ serviceInfo.account }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">名称:</span>
                            <span class="value">{{ serviceInfo.name }}</span>
                        </div>
                        <div v-if="isAppointmentService" class="info-item">
                            <span class="label">服务时间:</span>
                            <span class="value">{{ serviceInfo.serviceTime }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">发布时间:</span>
                            <span class="value">{{ serviceInfo.releaseTime }}</span>
                        </div>
                    </div>
                    
                    <!-- 右侧信息 -->
                    <div class="info-right">
                        <div class="info-item">
                            <span class="label">服务类型:</span>
                            <span class="value">{{ serviceInfo.serviceType }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">服务种类:</span>
                            <span class="value">{{ serviceInfo.serviceCategory }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">发布状态:</span>
                            <span class="value">
                                <el-tag :type="getStatusType(serviceInfo.publishStatus)">
                                    {{ getStatusText(serviceInfo.publishStatus) }}
                                </el-tag>
                            </span>
                        </div>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ArrowLeft } from '@element-plus/icons-vue';

const route = useRoute();
const router = useRouter();

const id = route.params.id as string;
const type = route.params.type as string;

// 判断服务类型
const isConsultationService = computed(() => type === 'consultation');
const isAppointmentService = computed(() => type === 'appointment');

// 页面标题
const pageTitle = computed(() => {
    return isConsultationService.value ? '咨询服务详情' : '预约服务详情';
});

// 服务基本信息
const serviceInfo = reactive({
    account: '17374558574',
    serviceTime: '09:00-10:00 10:00-11:00 11:00-12:00',
    serviceType: isConsultationService.value ? '情感咨询' : '风水预约',
    publishStatus: 'listed',
    name: '一成道长',
    releaseTime: '2025 7/20 16:55:22',
    serviceCategory: isConsultationService.value ? '咨询服务' : '预约服务'
});

// 获取状态类型
const getStatusType = (status: string) => {
    const statusMap: { [key: string]: string } = {
        'listed': 'success',
        'unlisted': 'warning'
    };
    return statusMap[status] || 'info';
};

// 获取状态文本
const getStatusText = (status: string) => {
    const statusMap: { [key: string]: string } = {
        'listed': '上架',
        'unlisted': '下架'
    };
    return statusMap[status] || status;
};

// 返回
const goBack = () => {
    router.push('/service-list');
};

// 页面初始化
onMounted(() => {
    // 根据ID和类型加载服务详情数据
    console.log('加载服务详情数据，ID:', id, 'Type:', type);
    loadServiceDetail(id, type);
});

// 加载服务详情数据
const loadServiceDetail = (serviceId: string, serviceType: string) => {
    // 这里可以调用API加载数据
    // 根据服务类型设置不同的数据
    if (serviceType === 'consultation') {
        // 加载咨询服务数据
        Object.assign(serviceInfo, {
            serviceType: '情感咨询',
            serviceCategory: '咨询服务',
            publishStatus: 'listed'
        });
    } else if (serviceType === 'appointment') {
        // 加载预约服务数据
        Object.assign(serviceInfo, {
            serviceType: '风水预约',
            serviceCategory: '预约服务',
            publishStatus: 'listed'
        });
    }
};
</script>

<style scoped>
.service-detail-container {
    padding: 20px;
    background-color: #f5f5f5;
    min-height: 100vh;
}

.page-header {
    background: white;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left h2 {
    margin: 0;
    color: #333;
    font-size: 24px;
}

.detail-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.detail-card {
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.service-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding: 20px 0;
}

.info-left, .info-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.info-item .label {
    min-width: 100px;
    color: #666;
    font-weight: 500;
}

.info-item .value {
    flex: 1;
    color: #333;
    word-break: break-all;
}

.consultation-info, .appointment-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .service-detail-container {
        padding: 10px;
    }
    
    .header-content {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
    
    .service-info {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .consultation-info, .appointment-info {
        gap: 12px;
    }
}
</style>
